<template>
  <div class="homepage-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="nav-content">
        <span class="nav-text">你好，请登录</span>
        <router-link to="/user/register" class="nav-link">免费注册</router-link>
        <span class="nav-divider">|</span>
        <span class="nav-text">关注我们：</span>
        <div class="social-icons">
          <i class="el-icon-message"></i>
          <i class="el-icon-phone"></i>
        </div>
        <span class="nav-divider">|</span>
        <span class="nav-link">手机版</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 网站标题 -->
      <div class="site-title">
        <h1>多·快·好·省</h1>
      </div>

      <div class="content-wrapper">
        <!-- 左侧产品展示区域 -->
        <div class="product-showcase">
          <div class="showcase-content">
            <!-- 手机展示 -->
            <div class="phone-mockup">
              <div class="phone-screen">
                <div class="app-header">多·快·好·省</div>
                <div class="product-grid">
                  <div class="product-item" v-for="item in showcaseProducts" :key="item.id">
                    <div class="product-image" :style="{ backgroundColor: item.color }">
                      <span class="product-icon">{{ item.icon }}</span>
                    </div>
                    <div class="product-name">{{ item.name }}</div>
                  </div>
                </div>
                <div class="app-bottom">
                  <div class="category-item" v-for="category in categories" :key="category">
                    {{ category }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 实物产品展示 -->
            <div class="physical-products">
              <div class="product-card denim-jacket">
                <div class="product-label">时尚服装</div>
              </div>
              <div class="product-card macarons">
                <div class="product-label">精美甜品</div>
              </div>
              <div class="product-card cosmetics">
                <div class="product-label">美妆护肤</div>
              </div>
            </div>

            <!-- 二维码区域 -->
            <div class="qr-code-section">
              <div class="qr-bag">
                <div class="qr-code">
                  <div class="qr-pattern"></div>
                </div>
              </div>
              <div class="qr-text">
                <h3>扫码购物</h3>
                <p>精彩无限！</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="login-section">
          <div class="login-card">
            <div class="login-header">
              <h2>登录</h2>
              <div class="register-link">
                <span>还没有用户账号，</span>
                <router-link to="/user/register">
                  <el-link type="primary" :underline="false">立即注册</el-link>
                </router-link>
              </div>
            </div>

            <el-form
                :model="loginForm"
                :rules="loginRules"
                ref="loginFormRef"
                class="login-form"
                @keyup.enter="handleLogin"
            >
              <el-form-item prop="username">
                <el-input
                    v-model="loginForm.username"
                    placeholder="用户名"
                    size="large"
                    :prefix-icon="User"
                    clearable
                />
              </el-form-item>

              <el-form-item prop="userpass">
                <el-input
                    v-model="loginForm.userpass"
                    type="password"
                    placeholder="密码"
                    size="large"
                    :prefix-icon="Lock"
                    show-password
                    clearable
                />
              </el-form-item>

              <el-form-item>
                <el-button
                    type="primary"
                    size="large"
                    class="login-btn"
                    @click="handleLogin"
                    :loading="loginLoading"
                >
                  {{ loginLoading ? '登录中...' : '登录' }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/util/request.js'

const router = useRouter()

// 登录表单数据
const loginForm = reactive({
  username: '',
  userpass: ''
})

// 表单引用
const loginFormRef = ref()

// 登录加载状态
const loginLoading = ref(false)

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  userpass: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 展示产品数据
const showcaseProducts = ref([
  { id: 1, name: '服装', icon: '👕', color: '#ff6b6b' },
  { id: 2, name: '数码', icon: '📱', color: '#4ecdc4' },
  { id: 3, name: '家居', icon: '🏠', color: '#45b7d1' },
  { id: 4, name: '美妆', icon: '💄', color: '#f9ca24' },
  { id: 5, name: '食品', icon: '🍰', color: '#f0932b' },
  { id: 6, name: '运动', icon: '⚽', color: '#eb4d4b' }
])

// 分类数据
const categories = ref(['热门推荐', '品质好货', '限时特惠', '新品上市'])

// 登录处理
const handleLogin = async () => {
  try {
    // 表单验证
    await loginFormRef.value.validate()

    loginLoading.value = true

    console.log('登录请求数据:', loginForm)

    // 调用登录接口
    const response = await request.post('/user/user/login', {
      username: loginForm.username,
      userpass: loginForm.userpass
    })

    console.log('登录响应:', response)

    const result = response.data

    if (result.code === 1) {
      // 登录成功
      const { userId, username, token } = result.data

      // 存储用户信息到localStorage
      localStorage.setItem('token', token)
      localStorage.setItem('userId', userId)
      localStorage.setItem('username', username)


      ElMessage.success('登录成功！')

      // 跳转到首页
      setTimeout(() => {
        router.push('/home')
      }, 1000)

    } else {
      // 登录失败
      ElMessage.error(result.message || '登录失败')
    }

  } catch (error) {
    console.error('登录错误:', error)

    if (error.response && error.response.data) {
      ElMessage.error(error.response.data.message || '登录失败，请检查用户名和密码')
    } else if (error.message) {
      ElMessage.error(error.message)
    } else {
      ElMessage.error('网络错误，请稍后重试')
    }
  } finally {
    loginLoading.value = false
  }
}
</script>

<style scoped>
.homepage-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 顶部导航栏 */
.top-nav {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 0;
  backdrop-filter: blur(10px);
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  color: white;
  font-size: 12px;
}

.nav-text, .nav-link {
  margin: 0 8px;
}

.nav-link {
  cursor: pointer;
  text-decoration: underline;
}

.nav-divider {
  margin: 0 8px;
  opacity: 0.6;
}

.social-icons {
  display: flex;
  gap: 8px;
  margin: 0 8px;
}

.social-icons i {
  cursor: pointer;
  opacity: 0.8;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.site-title {
  text-align: center;
  margin-bottom: 60px;
}

.site-title h1 {
  color: white;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 4px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.content-wrapper {
  display: flex;
  gap: 80px;
  align-items: center;
}

/* 左侧产品展示区域 */
.product-showcase {
  flex: 1;
}

.showcase-content {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* 手机展示 */
.phone-mockup {
  background: #333;
  border-radius: 25px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: rotate(-5deg);
}

.phone-screen {
  width: 250px;
  height: 450px;
  background: white;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.app-header {
  text-align: center;
  font-weight: bold;
  color: #ff6b4a;
  margin-bottom: 20px;
  font-size: 18px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  flex: 1;
}

.product-item {
  text-align: center;
}

.product-image {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 8px;
}

.product-name {
  font-size: 12px;
  color: #666;
}

.app-bottom {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.category-item {
  font-size: 10px;
  color: #999;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 10px;
}

/* 实物产品展示 */
.physical-products {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-card {
  width: 120px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.denim-jacket {
  background: linear-gradient(45deg, #2c3e50, #3498db);
}

.macarons {
  background: linear-gradient(45deg, #ff9a9e, #fecfef);
}

.cosmetics {
  background: linear-gradient(45deg, #a8edea, #fed6e3);
}

.product-label {
  position: relative;
  z-index: 2;
}

/* 二维码区域 */
.qr-code-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.qr-bag {
  width: 100px;
  height: 80px;
  background: #ff4757;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qr-bag::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #ff4757;
}

.qr-code {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-pattern {
  width: 45px;
  height: 45px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="20" height="20" fill="black"/><rect x="40" width="20" height="20" fill="black"/><rect x="80" width="20" height="20" fill="black"/><rect y="40" width="20" height="20" fill="black"/><rect x="80" y="40" width="20" height="20" fill="black"/><rect y="80" width="20" height="20" fill="black"/><rect x="40" y="80" width="20" height="20" fill="black"/><rect x="80" y="80" width="20" height="20" fill="black"/></svg>') no-repeat center;
  background-size: contain;
}

.qr-text {
  text-align: center;
  color: white;
}

.qr-text h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: bold;
}

.qr-text p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 右侧登录区域 */
.login-section {
  width: 350px;
  flex-shrink: 0;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.login-header {
  margin-bottom: 30px;
}

.login-header h2 {
  font-size: 28px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.register-link {
  font-size: 14px;
  color: #666;
}

.login-form .el-form-item {
  margin-bottom: 20px;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(45deg, #ff6b4a, #ff8a50);
  border: none;
}

.login-btn:hover {
  background: linear-gradient(45deg, #ff5a39, #ff7940);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .showcase-content {
    justify-content: center;
  }

  .login-section {
    width: 100%;
    max-width: 400px;
  }

  .site-title h1 {
    font-size: 36px;
  }
}
</style>
